<template>
    <div>
        <el-row class="tac">
            <el-col :span="4" >
                <p></p>
                <div class="fixed-header-left" @click="curIndex = '' ">
                    <h5 class="sidebar-title" >增添题目</h5>
                    <el-menu
                            class="el-menu-vertical-demo"
                            @select="handleInset"
                            background-color="#304156"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1">
                            <svg-icon icon-class="标题" style="margin-right:5px"/>
                            <span slot="title">章节标题</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <svg-icon icon-class="单选" style="margin-right:5px"/>
                            <span slot="title">单选题</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <svg-icon icon-class="多选" style="margin-right:5px"/>
                            <span slot="title">多选题</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <svg-icon icon-class="级联" style="margin-right:5px"/>
                            <span slot="title">级联题</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <svg-icon icon-class="文本" style="margin-right:5px"/>
                            <span slot="title">文本题</span>
                        </el-menu-item>
                    </el-menu>
                </div>

            </el-col>
            <el-col :span="18">
                <el-container>
                    <el-header>
                        <div class="filter-container">
                            <h3 style="display: inline-block;margin-right: 10px">{{mtitle}}</h3>
                            <span style="display: inline-block;margin-left: 10px;margin-right: 15px">
                            共计{{questions.length}}道(含章节目录类)
                        </span>
                            <el-button
                                    type="success"
                                    @click="upDataQuestion"
                            >
                                保存
                            </el-button>

                        </div>
                    </el-header>
                    <el-main>
                        <div v-if="questions.length" class="qu-content">
                            <section class="qu-item"
                                     v-for="(item, index) in questions"
                                     :class="{nowEditing: curIndex === index }"
                                     @click="curIndex = index; "
                                     :key="item.realSort"
                            >
                                <item_chained v-if="item.type === 'chained'"
                                              :itemData="item" :isDisabled="!(curIndex === index)" :answerCount="answerCount"
                                              :itemIndex="index" :moveUp="moveUp" :moveDown="moveDown" :delQuestion="delQuestion"
                                              :itemUpDataItem = "upDataItem"
                                ></item_chained>
                                <item_checkbox v-if="item.type === 'checkbox'"
                                               :itemData="item" :isDisabled="!(curIndex === index)" :answerCount="answerCount"
                                               :itemIndex="index" :moveUp="moveUp" :moveDown="moveDown" :delQuestion="delQuestion"
                                               :itemUpDataItem = "upDataItem"
                                ></item_checkbox>
                                <item_head :id="item.type+item.realSort" v-if="item.type === 'head'"
                                           :itemData="item" :isDisabled="!(curIndex === index)" :answerCount="answerCount"
                                           :itemIndex="index" :moveUp="moveUp" :moveDown="moveDown" :delQuestion="delQuestion"
                                           :itemUpDataItem = "upDataItem"
                                ></item_head>
                                <item_radio v-if="item.type === 'radio'"
                                            :itemData="item" :isDisabled="!(curIndex === index)" :answerCount="answerCount"
                                            :itemIndex="index" :moveUp="moveUp" :moveDown="moveDown" :delQuestion="delQuestion"
                                            :itemUpDataItem = "upDataItem"
                                ></item_radio>
                                <item_textarea v-if="item.type === 'textarea'"
                                               :itemData="item" :isDisabled="!(curIndex === index)" :answerCount="answerCount"
                                               :itemIndex="index" :moveUp="moveUp" :moveDown="moveDown" :delQuestion="delQuestion"
                                               :itemUpDataItem = "upDataItem"
                                ></item_textarea>
                            </section>
                        </div>
                        <div v-else style="text-align:center;color:#9a9798;font-size:20px">
                            请选择左侧增添问卷题目
                        </div>
                    </el-main>
                </el-container>
            </el-col>
            <el-col :span="2" @click="curIndex = '' ">
                <p></p>
                <div class="fixed-header-right" @click="curIndex = '' ">
                    <h5 class="left-sidebar-title">章节目录</h5>
                    <el-menu
                            class="el-menu-vertical-demo"
                            @select="gotoTitle"
                            background-color="#819CD9"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item :index="item.type+item.realSort" v-for="(item, index) in title_list">
                            <svg-icon icon-class="跳转" style="margin-right:5px"/>
                            <span slot="title">{{item.viewSort+"/"+item.title}}</span>
                        </el-menu-item>

                    </el-menu>
                </div>

            </el-col>
        </el-row>
        <el-dialog :title="'完善问卷基本信息'" :visible.sync="dlgVisible" custom-class="customWith" width="70%">
            <moudleForm
                    ref="editForm"
                    :close-dlg="hideDlg"
                    :is-add="true"
                    :rowData ="moudleData"
            ></moudleForm>
        </el-dialog>
    </div>
</template>


<script>
    import  {new_head,new_radio,new_checkbox,new_chained,new_textarea,new_options}  from '@/utils/newQuestion'
    import item_chained from './components/item_chained'
    import item_checkbox from './components/item_checkbox'
    import item_head from './components/item_head'
    import item_radio from './components/item_radio'
    import item_textarea from './components/item_textarea'
    import moudleForm from './components/moudleForm'
    import { postBody,post} from "@/utils/httpUtil";
    export default {
        data() {
            return {
                mid:null,
                mtitle:'新建问卷',
                questions:[],
                curIndex: '',
                new_head:new_head,
                new_radio:new_radio,
                new_checkbox:new_checkbox,
                new_chained:new_chained,
                new_textarea:new_textarea,
                new_options:new_options,
                dlgVisible:false,
                moudleData:{
                    mouldType:0,
                    title:'',
                    prefixPic:'',
                    prefix:'',
                    suffix:'',
                    startTime:'',
                    endTime:'',
                    purpose:'',
                    state:0,
                    status:0,
                    showNum:0,
                    answerCount:0,
                    recovery:0,
                    pageviews:0,
                    rateRecovery:0,
                    createOwner:this.$store.state.user.id
                }

            }
        },
        computed: {
            // 计算属性的 getter
            answerCount: function () {
                // `this` 指向 vm 实例
                return Number(this.questions.length)
            },
            title_list(){
                if(this.questions){
                    return this.questions.filter((q,index,self)=>{
                        return q.type === 'head';
                    })
                }
                return [];
            },
        },
        watch:{
        },
        components: {
            item_chained,
            item_checkbox,
            item_head,
            item_radio,
            item_textarea,
            moudleForm
        },
        methods: {
            handleInset(key, keyPath) {
                let newQu ={}
                let newOp ={}
                let newSort = this.questions.length
                switch (key) {
                    case '1' :
                        newQu = JSON.parse(JSON.stringify(this.new_head));
                        break;
                    case '2' :
                        newQu = JSON.parse(JSON.stringify(this.new_radio))
                        newQu.options = []
                        newOp = JSON.parse(JSON.stringify(this.new_options))
                        let newOp1 =JSON.parse(JSON.stringify(newOp))
                        let newOp2 =JSON.parse(JSON.stringify(newOp))
                        newQu.options.push(newOp1)
                        newQu.options.push(newOp2)
                        break;
                    case '3' :
                        newQu = JSON.parse(JSON.stringify(this.new_checkbox))
                        newQu.options = []
                        newOp = JSON.parse(JSON.stringify(this.new_options))
                        newOp1 =JSON.parse(JSON.stringify(newOp))
                        newOp2 =JSON.parse(JSON.stringify(newOp))
                        newQu.options.push(newOp1)
                        newQu.options.push(newOp2)
                        break;
                    case '4' :
                        newQu = JSON.parse(JSON.stringify(this.new_chained))
                        newQu.options = []
                        newOp = JSON.parse(JSON.stringify(this.new_options))
                        newOp1 =JSON.parse(JSON.stringify(newOp))
                        newOp2 =JSON.parse(JSON.stringify(newOp))
                        newOp1.label='是'
                        newOp1.id = 1
                        newOp1.isEdit =0
                        let newOp1_1 =JSON.parse(JSON.stringify(newOp))
                        newOp1_1.id =2
                        newOp1_1.isEdit =0
                        newOp1.children = []
                        newOp1.children.push(newOp1_1)
                        newOp2.label='否'
                        newOp2.id =3
                        newOp2.isEdit =0
                        let newOp2_1 =JSON.parse(JSON.stringify(newOp))
                        newOp2.children = []
                        newOp2_1.id=4
                        newOp2_1.isEdit =0
                        newOp2.children.push(newOp2_1)
                        newQu.options.push(newOp1)
                        newQu.options.push(newOp2)
                        break;
                    case '5' :
                        newQu = JSON.parse(JSON.stringify(this.new_textarea))
                        break;
                }
                newQu.realSort = newSort
                this.$nextTick(() => {
                    this.questions.push(newQu)
                });
            },
            getQetionesList() {
                let remap ={}
                remap.mid = this.mid
                postBody("/questionItem/getByMIdUid", remap).then(resp => {
                    if(resp.result) {
                        this.questions = resp.data

                    } else {
                        this.$notify({
                            title: '提示',
                            message: '题目失败！'+resp.msg,
                            type: 'warning',
                            duration: 2000
                        })
                    }
                })
            },
            gotoTitle(hash,path){
                document.getElementById(hash).scrollIntoView(true);
            },
            //保存至后台
            upDataQuestion(){
                if(this.questions.length<1){
                    this.$notify({
                        title: '提示',
                        message: '没有题目可保存！',
                        type: 'warning',
                        duration: 2000
                    });
                    return
                }
                //有不有问卷module
                if(!this.mid){
                    this.$confirm('未检测出问卷基本信息,点击确定完善', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.dlgVisible=true
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });

                }else{

                    let gotoUpDataQuestion =this.questions
                    //级联数据清洗id和isEdit
                    gotoUpDataQuestion.forEach((item, index) => {
                        item.realSort = index
                        if(item.type === 'chained'){
                            let new_options = this.clearDataForEach(item.options)
                            item.options = new_options
                        }
                    });

                    let remap ={}
                    remap.mid = this.mid
                    remap.gotoUpDataQuestion = gotoUpDataQuestion
                    postBody("/questionItem/addOrUpdate", remap).then(resp => {
                        if(resp.result) {
                            this.$notify({
                                title: '提示',
                                message: '题目保存成功！',
                                type: 'success',
                                duration: 2000
                            })
                            this.$router.push({path: '/home/moudle', query: {}})
                        } else {
                            this.$notify({
                                title: '提示',
                                message: '题目保存失败！'+resp.msg,
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    })
                }

            },
            switchItem(index, array) {
                this.curIndex = '';
                let arr = array.splice(index, 2);
                array.splice(index , 0, ...arr.reverse());
            },
            moveUp(index) {
                this.switchItem(index - 1, this.questions);
            },
            moveDown(index) {
                this.switchItem(index, this.questions);
            },
            delQuestion(index) {
                this.curIndex = '';
                let de_q=this.questions[index];
                if(de_q.id){
                    if(typeof de_q.id === 'number'){
                        //是级联的临时id
                        this.questions.splice(index, 1);
                    }
                    //后台删除成功后
                    this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let redata = {
                            id: de_q.id
                        }
                        post("/questionItem/delById", redata).then(response => {
                            if (response.result) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.questions.splice(index, 1);
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: '删除失败!'+response.msg
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.questions.splice(index, 1);
                }

            },
            upDataItem(index,item){
                this.$set(this.questions,index,item)
            },
            clearDataForEach(arr){
                arr.forEach((item, index) => {
                    let newItem = this.clearData(item);
                    arr[index] = newItem
                });
                return arr;
            },
            clearData(node){
                if(typeof node.id === 'number'){
                    delete node.id;
                }
                if(node["isEdit"] != undefined){
                    delete node.isEdit;
                }
                if(node.children){
                    let newChildren = this.clearDataForEach(node.children)
                    node.children = newChildren
                }
                return node
            },
            //moudle相关
            hideDlg(getNewMid){
                this.mid = getNewMid
                this.dlgVisible=false
                this.$confirm('问卷基本信息已保存成功,点击确定继续保存题目', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.upDataQuestion()

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });

            }

        },
        created() {
            let q_mid = this.$route.query.mid
            let mtitle = this.$route.query.mtitle
            if(q_mid){
                this.mid = q_mid
                this.mtitle = mtitle
            }
            if(this.mid){
                this.getQetionesList()
            }

        }
    }
</script>

<style scoped lang="scss">
    .sidebar-title {
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #2b2f3a;
        text-align: center;
        overflow: hidden;
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 14px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
    .left-sidebar-title{
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #407ee6;
        text-align: center;
        overflow: hidden;
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 14px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
    .fixed-header-left {
        margin-top: 3%;
        width: 17%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40000;
    }
    .fixed-header-right {
        margin-top: 3%;
        width: 9%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 40000;
    }
    $white: #fff;
    $orange: #f07600;
    $deep-orange: #c26206;
    $light-orange: #fcf0e5;
    $light-green: #60e451;
    $font-color: #555;
    .qu-content {
        padding: 2rem;

        border: {
            top: 2px solid #bbb;
            bottom: 2px solid #bbb;
        }

        .qu-item {
            position: relative;
            margin: 1rem 0;
            padding: 1rem 2rem;
            border:2px solid #000;
            &:hover {
                background-color: #bbb;
                border:2px dashed #000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
            }



            div:last-of-type {
                height: 2rem;
            }

            &.nowEditing {
                background-color: #bbb;
                border:2px dashed #000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
            }
            &.el-container{
                display: block;
            }

        }


    }
    .filter-container {
        text-align: left;
        margin-bottom: 10px;
    }
</style>
